<script type="text/javascript" src="js/jquery/infowindow.js"></script>
<script type="text/javascript" src="js/jquery/jquery.form.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	
	initializeGeoCoder();
	$("#map_canvas").hide();
	$('#ccity').focus();
	
	$("#vehicleinformation").validate({
		errorClass: "my-error-class",
		validClass: "my-valid-class",
		debug: false,
		rules: {
			vcompany: "required",
			vvehicle: "required",
			vcapacity : "required"
		},
		submitHandler: function(form){
			$.post("query/addvehicleinformation.php", $("#vehicleinformation").serialize(), function(data){
				window.location.replace("panel.php?page=preview_vehicle&company="+$("#vcompany").val()+"+&vehicle="+$("#vvehicletype").val()+"&model="+$("#vvehiclemodel").val()+"&capacity="+$("#vcapacity").val());
				alert(data);
			});
		}
	});
	
	$("#vcompany").autocomplete({
		source: "query/input-search.php",
		minLength: 2,
		select: function(event, ui){
			$("#afid").val(ui.item.afid);
		},
		open: function() {
			$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
		}
	});
	
	$("#vvehicletype").autocomplete({
		source: "query/getvehicletype.php",
		minLength: 2,
		open: function() {
			$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
		},
		close: function() {
			$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
		}
	});
	
	$('#photoimg').live('change', function() { 
		$("#picpreview").html('');
		$("#picpreview").html('<img src="images/loader.gif" alt="Uploading...."/>');
		$("#imageformvehicle").ajaxForm({
			target: '#picpreview'
		}).submit();
	});
	
	$("#btnClearVehicle").click(function(){
		$('#imageformvehicle').each(function(){
			this.reset();
		});
		$("#picpreview").empty();
	});
});
</script>

<!--  start nav-outer-repeat................................................... END -->
 
 <div class="clear"></div>
 
<!-- start content-outer -->
<div id="content-outer">
<!-- start content -->
<div id="content">

<div id="map_canvas"></div>

<div id="page-heading"><h1>Add vehicle</h1></div>

<div id="back_affiliate_driver" style="padding-left:315px;">
	<a href="<?php echo"affiliate_vehicles.php?id=".$id;?>"><img alt="back" style="border:none;" src="images/forms/back.png" /></a>
</div>

<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
<tr>
	<th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
	<th class="topleft"></th>
	<td id="tbl-border-top">&nbsp;</td>
	<th class="topright"></th>
	<th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
</tr>
<tr>
	<td id="tbl-border-left"></td>
	<td>
	<!--  start content-table-inner -->
	<div id="content-table-inner">
	
	<table border="0" width="100%" cellpadding="0" cellspacing="0">
	<tr valign="top">
	<td>
	
	
		<!--  start step-holder -->
		<div id="step-holder">
			<div class="step-no">1</div>
			<div class="step-dark-left"><a href="">Add vehicle details</a></div>
			<div class="step-dark-right">&nbsp;</div>
			<div class="step-no-off">2</div>
			<div class="step-light-left">Preview vehicle details</div>
			<div class="step-light-round">&nbsp;</div>
			<div class="clear"></div>
		</div>
		<!--  end step-holder -->
	
		<!-- start id-form -->
		<table border="0" cellpadding="0" cellspacing="0" id="id-form">
			<form id="imageformvehicle" method="post" enctype="multipart/form-data" action='query/ajaximage.php'>
				<th valign="top">Upload image:</th>
				<td> <input type="file" name="photoimg" id="photoimg" /></td> 
				<td> <div id="picpreview" style="position: absolute; top: 300px; left: 550px;"> <br><br><br>image shown here.... </div>  </td>
				<td><td><td><td><td><td><td><td><td><td><td><td><td><td></td>
			</form>
		</table>
	
		<form id="vehicleinformation" method="post" action="">
			<table border="0" cellpadding="0" cellspacing="0"  id="id-form">
				<tr>
					<th valign="top">Company:</th>
					<td><input type="text" name="vcompany" id="vcompany" class="inp-form" autocomplete="off"/></td>
					<td></td>
				</tr>
				<tr>
				<th valign="top">Vehicle Type:</th>
				<td><input type="text" name="vvehicletype" id="vvehicletype" class="inp-form" autocomplete="off"/></td>
				<td></td>
				</tr> 
				<tr>
					<th valign="top">Vehicle Model:</th>
					<td><input type="text" name="vvehiclemodel" id="vvehiclemodel" class="inp-form" autocomplete="off"/></td>
					<td></td>
				</tr>
				<tr>
					<th valign="top">Capacity:</th>
					<td><input type="text" name="vcapacity" id="vcapacity"class="inp-form" /></td>
					<td></td>
				</tr>
			<tr>
				<th>&nbsp;</th>
				<td valign="top">
					<input type="submit" class="form-submit" />
					<input type="reset" id="btnClearVehicle" class="form-reset"  />
				</td>
				<td></td>
			</tr>
		</table>
		<input type="hidden" id="afid" name="afid"/>
	</form>
	
	<!-- end id-form  -->

	</td>
	<td>

	<!--  start related-activities -->
	<div id="related-activities">
		
		<!--  start related-act-top -->
		<div id="related-act-top">
		<img src="images/forms/step_bar.png" width="271" height="43" alt="" />
		</div>
		<!-- end related-act-top -->
		
		<!--  start related-act-bottom -->
		<div id="related-act-bottom">
		
			<!--  start related-act-inner -->
			<div id="related-act-inner">
			
				<div class="left"><a href=""><img src="images/forms/icon_plus.gif" width="21" height="21" alt="" /></a></div>
				<div class="right">
					<h5>Adding a vehicle:</h5><br>
					<ul class="greyarrow">
						<li>First, upload the vehicle photo and the preview of the uploaded image will be shown</li>
						<li>Second, fill in the company name</li>
						<li>Third, fill in the vehicle model</li>
						<li>Fourth, fill in the passenger's capacity</li>
						<li>Finally, click the submit button for it to be save to the database</li>
						<li>Or, click the reset button to clear all typed vehicle details</li>
						<li></li>
					</ul>
				</div>
				
				<div class="clear"></div>
			</div>
			<!-- end related-act-inner -->
			<div class="clear"></div>
		
		</div>
		<!-- end related-act-bottom -->
	
	</div>
	<!-- end related-activities -->

</td>
</tr>
<tr>
<td><img src="images/shared/blank.gif" width="695" height="1" alt="blank" /></td>
<td></td>
</tr>
</table>
 
<div class="clear"></div>
 

</div>
<!--  end content-table-inner  -->
</td>
<td id="tbl-border-right"></td>
</tr>
<tr>
	<th class="sized bottomleft"></th>
	<td id="tbl-border-bottom">&nbsp;</td>
	<th class="sized bottomright"></th>
</tr>
</table>

<div class="clear">&nbsp;</div>

</div>
<!--  end content -->
<div class="clear">&nbsp;</div>
</div>
<!--  end content-outer -->


<div class="clear">&nbsp;</div>
